// 函数组件 + 手动订阅
// 不使用useSelector, useDispatch
// 需要手动订阅store的变化
// 需要手动取消订阅
// store.getState()只是一个快照，可以理解为一个普通对象
// store.subscribe()是一个监听器，监听state的变化
// store.dispatch()是一个分发器，分发action
import React, { useState, useEffect } from "react";
import store from '../store'

function FunctionManualTest() {
  const [state, setState] = useState(store.getState()); // 初始化 state

  useEffect(() => {
    // 订阅 store，当 state 变化时更新组件
    const unsubscribe = store.subscribe(() => {
      setState(store.getState());
    });

    return () => unsubscribe(); // 卸载时取消订阅
  }, []);

  return (
    <div>
      <h2>函数组件 + 手动订阅 store</h2>
      <p>当前值: {state.value}</p>
      <button onClick={() => store.dispatch({ type: "counter/incremented" })}>+1</button>
      <button onClick={() => store.dispatch({ type: "counter/decremented" })}>-1</button>
    </div>
  );
}

export default FunctionManualTest;
